<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet"/>
	    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/lcs-font.css"/>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="workbench/main.html">
			<span class="mui-icon iconfont icon-shebeizhuangtai"></span>
			<span class="mui-tab-label">工作台</span>
		</a>
		<a class="mui-tab-item" href="business/main.html">
			<span class="mui-icon iconfont icon-shujukanban"></span>
			<span class="mui-tab-label">营业分析</span>
		</a>
		<a class="mui-tab-item" href="">
			<span class="mui-icon iconfont icon-icon_tianjia"></span>
			<span class="mui-tab-label">收银记账</span>
		</a>
		<a class="mui-tab-item" href="inventory/main.html">
			<span class="mui-icon iconfont icon-icon_baocun"></span>
			<span class="mui-tab-label">库存管理</span>
		</a>
		<a class="mui-tab-item" href="personal/personal.html">
			<span class="mui-icon iconfont icon-icon_zhanghao"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
		<div class="mui-content">
			
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/util.js"></script>
		<script type="text/javascript">
			var vurl = "";//版本路径
			var index = 0;
			var subpages = ["workbench/main.html",
				"business/main.html",
				"",
				"inventory/main.html",
				"personal/personal.html"];
				
			var is_show = false;
			var numbers = 16;
			is_show = getrequest().is_show||false;
			numbers = getrequest().numbers||16;
			console.log(numbers);
			console.log(is_show);
			setTimeout(function(){
				if(is_show && numbers <= 15){
					mui.alert("您的软件还有"+numbers+"天到期了，续费请与客服联系！", '提示', function() {
		            });
				}
			},10);
			
			(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				var activeTab = subpages[index];
				mui.plusReady(function() {
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#F7F7F7',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#F7F7F7'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#F7F7F7',
							radius: '50%'
						}
					}, {
						tag: 'font',
						id: 'icon',
						text: '\ueb89', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px', 
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/css/iconfont.ttf',
							align: 'center',
							color: '#7c7c7c',
							size: '50px'
						}
					}]);
					// append 到父webview中
					self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						//mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
						var list = {gotype:'cashier'}
						mui.openWindow({
						    url: 'general/lookingForMember.html?gotype=cashier', 
						    id: 'lookingForMember',
						    extras:list,
						});
						
					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					//var aniShow = {};
					//util.initSubpage(aniShow);
					
					//var self = plus.webview.currentWebview();
							for (var i = 0; i < subpages.length; i++) {
								var sub = plus.webview.create(
								subpages[i], subpages[i], {
									top: '0px',
									bottom: '50px'
								});
								if(i > index){
									sub.hide();
								}
								self.append(sub);
								
							}
		            		var backButtonPress = 0;
							mui.back = function(event) {
								backButtonPress++;
								if (backButtonPress > 1) {
									plus.runtime.quit();
								} else {
									plus.nativeUI.toast('再按一次退出应用');
								}
								setTimeout(function() {
									backButtonPress = 0;
								}, 1000);
								return false;
							};
					
					/*var 	nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					*/
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					mui('.mui-bar-tab').on('tap', 'a', function (){
				var targetTab = this.getAttribute('href');
				if(activeTab == targetTab){
					return;
				}
				if(mui.os.plus && "" != targetTab){
					plus.webview.show(targetTab);
					plus.webview.hide(activeTab);
					activeTab = targetTab;
				} else if("" != targetTab){
					createIframe('.mui-content', {
						url: targetTab,
						style: {
							top: '0px',
							bottom: '50px'
						}
					})
				}else{
					/*mui.openWindow({
                        url: 'general/lookingForMember.html?gotype=cashier', 
						id: 'lookingForMember',
                	});*/
				}
			});
			function createIframe(el,opt) {
				var elContainer = document.querySelector('mui-content');
				var wrapper = document.querySelector('.mui-iframe-wrapper');
				if(!wrapper){
					wrapper = document.createElement('div');
					wrapper.className = 'mui-iframe-wrapper';
					for (var i in opt.style) {
						wrapper[i] = opt.style[i];
					}
				}	
				var iframe = document.createElement('iframe');
				iframe.src = opt.url;
				iframe.id = opt.id || opt.url;
				iframe.name = opt.id;
				wrapper.appendChild(iframe);
				elContainer.appendChild(wrapper);
			}
				});
			window.onload = function(){
				checkVersion();
			}
			function checkVersion(){
				var data = {
					url:"/api/version/check",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("版本",res);
					if(res.data.serial_number > version){
						if(!is_ios()){
							var list = {vurl: res.data.path_url||"",content:res.data.content,serial_number:res.data.serial_number};
							console.log("版本返回数据："+JSON.stringify(list));  
							mui.openWindow({
							    url: 'version-page.html?list='+JSON.stringify(list), 
							    id: 'version-page',
							    extras: list,
							 });
						}else{
							mui.toast("请到苹果商城更新版本")
						}
					}else{
						console.log("最新版");
					}
				})
				}
			})();
		</script>
	</body>

</html>